<template>
  <div class="picChart" :ref="refId"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'TypePieChart',
  props: {
    refId: {
      type: String,
      default: 'picChart' + new Date().getTime(),
    },
    data: {
      type: Array,
      default() {
        return [
          {
            name: '提水干管',
            total: 10,
          },
          {
            name: '输水干管',
            total: 10,
          },
          {
            name: '配水干管',
            total: 10,
          },
          {
            name: '配水分干管',
            total: 10,
          }
        ]
      },
    },
  },
  data() {
    return {
      myChart: null,
    }
  },
  watch: {
    data: {
      handler(val) {
        if (val.length === 0) return
        const newData = val.map(item => {
          return {
            ...item,
            name: item.name,
            value: item.total,
            strValue: item.total,
          }
        })
        this.$nextTick(() => {
          this.myChart = echarts.init(this.$refs[this.refId])
          this.getOptions(newData)
        })
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getOptions(data) {
      let total = 0
      data.forEach(i => {
        total = total + i.value
      })
      let totalNumber = total
      const options = {
        color: [
          'rgba(241, 166, 73, 1)',
          'rgba(63, 174, 247, 1)',
          'rgba(59, 221, 222, 1)',
          '#A277CF',
          '#DBD024',
          '#00A818',
          '#DCA33F',
          '#ff706a',
        ],
        tooltip: {
          show: false,
        },
        title: {
          text: total + 'km',
          subtext: '总数',
          itemGap: 2,
          textAlign: 'center',
          textStyle: {
            fontFamily: 'DINAlternate-Bold',
            color: '#FFFFFF',
            fontSize: 16,
            fontWeight: 'bold',
          },
          subtextStyle: {
            fontFamily: 'PingFangSC-Regular',
            color: '#AFE2FF',
            fontSize: 12,
          },
          top: '37%',
          left: '14.5%',
        },
        legend: {
          selectedMode: false,
          itemWidth: 8,
          itemHeight: 8,
          icon: 'circle', // 设置图例图标形状为圆形
          itemStyle: {},
          top: 'center',
          right: '-4%',
          orient: 'vertical',
          formatter: name => {
            const item = data.find(i => i.name === name)
            if (item) {
              let arr = [
                '{a|' + name + '}',
                '{b|' + (item.value * 100 / totalNumber).toFixed(1) + '%}',
                '{c|' + item.value + 'km}'
              ]
              return arr.join('')
            }
            return ''
          },
          textStyle: {
            width: 210,
            height: 18,
            lineHeight: 18,
            borderRadius: 0,
            rich: {
              a: {
                fontFamily: 'PingFangSC-Regular',
                color: '#B3EBFF',
                fontSize: 14,
                width: 90,
                padding: [0, 0, 0, 10],
              },
              b: {
                fontFamily: 'DINAlternate-Bold',
                color: '#ffffff',
                fontSize: 14,
                width: 60,
                fontWeight: 'bold',
              },
              c: {
                color: '#B3EBFF',
                align: 'left',
                fontSize: 14,
                width: 60,
                fontWeight: 'bold',
              },
            },
          },
        },
        graphic: [
          {
            type: 'image',
            id: 'logo',
            left: '1%',
            top: '9.8%',
            z: 0,
            bounding: 'raw',
            style: {
              width: 100,
              height: 100,
              image: '@/assets/images/screen/pie-chart-bg.png',
            },
          },
        ],

        series: [
          {
            name: 'Access From',
            type: 'pie',
            center: ['16%', '50%'],
            radius: ['60%', '72%'],
            label: {
              show: false,
            },
            emphasis: {
              disabled: false,
            },
            labelLine: {
              show: false,
            },
            data,
          },
        ],
      }
      this.myChart && this.myChart.setOption(options)
    },
  },
}
</script>

<style lang="scss" scoped>
.picChart {
  width: 100%;
  height: 126px;
}
</style>
